<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .kuang{
                border: 1px solid;
                width: 400px;
                height: 110px;
                margin: 0 auto;
                border-radius: 10px;
                display: none;
            }
            .shang{
                border-bottom: 1px black solid;
                background-color: #4285F4;
                width: 400px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border-radius: 10px 10px 0px 0px ;
                font-family: "Arabic Typesetting";

            }
            .zhong{
                border-bottom: 1px black solid;
                width: 400px;
                height: 50px;
            }
            .xia{
                border-bottom:black;
                width: 400px;
                height: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <button id="btn">点击按钮</button>
        <div class="kuang">
            <div class="shang">
                与.........的聊天
            </div>
            <div class="zhong">
                内容：-------------------------
            </div>
            <div class="xia">
                <a href="#">关闭</a>
            </div>

        </div>
        <script src="../jquery.min.js"></script>
        <script>
            var  btn = $("#btn")
            var kuang = $(".kuang")
            btn.click(
                function () {
                    kuang.css("display","block")
                }
            )
            var xia=$(".xia")
            xia.click(
                function () {
                    kuang.css("display","none")
                }
            )
        </script>
    </body>
</html>